<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/node_modules/layui/dist/css/layui.css">
    <link rel="stylesheet" href="/public/css/view-css.css">
    <script src="/node_modules/layui/dist/layui.js"></script>
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
</head>

<body class="layui-anim layui-anim-up">
    <header class="header-view">
        <h1>欢迎使用职位信息获取系统</h1>
        <div>本系统获取 <a class="a-color" target="_blank" href="https://www.lagou.com/">【拉钩网】</a> 的职位信息，具体内容以实际为准</div>
    </header>
    <div class="main-view">
        <div>
            <form class="layui-form" action="#">
                <div class="layui-form-item">
                    <label class="layui-form-label">职位名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="title" required lay-verify="required" placeholder="请输入职位名称"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">切换城市</label>
                    <div class="layui-input-block">
                        <select id="city" lay-verify="required">
                            <option value="1" selected>北京</option>
                            <option value="2">上海</option>
                            <option value="3">杭州</option>
                            <option value="4">广州</option>
                            <option value="6">深圳</option>
                            <option value="7">成都</option>
                            <option value="8">武汉</option>
                            <option value="9">江苏</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">学历要求</label>
                    <div class="layui-input-block">
                        <select id="education" lay-verify="required">
                            <option value="2" selected>不限</option>
                            <option value="3">大专</option>
                            <option value="4">本科</option>
                            <option value="5">硕士</option>
                            <option value="6">博士</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">获取数量</label>
                    <div class="layui-input-block">
                        <input id="number" min="1" name="pageCount" class="layui-input" placeholder="请输入要获取前几页的数据"
                            value="1">
                        <span>拉钩网每页展示的职位数量为15条，此数值表示要获取前几页的数据，数值越大，数据获取越慢，请合理设置，一般 3 ~ 7 即可</span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" type="button" lay-filter="formDemo"
                            onclick="submitFrom(event)">立即获取</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        function submitFrom(e) {
            e.preventDefault();
            let fromdata = {
                title: $('#title').val(),
                city: $('#city').val(),
                education: $('#education').val(),
                number: $('#number').val(),
            }
            if (!fromdata.title) {
                layer.msg('职位名称不能为空', {
                    icon: 5
                })
                return;
            }
            $.get('/getLaGouInfo',fromdata).then(res=>{
                console.log(res);
            })
            console.log(fromdata);
        }
    </script>
</body>

</html>